<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<style type="text/css">

/* 弹窗样式设置 */
.modal {
	margin-top: 160px;
}

.modal-footer {
	justify-content: center;
}

#commentTitle {
	font-size: 18px;
	margin-left: 34%;
}

#commentCname {
	color: orange;
}

#submitComment {
	margin-right: 30px;
	margin-left: 10px;
}

#cancleComment {
	margin-left: 30px;
}

</style>

<!-- 按钮：用于打开模态框 -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#commentModal">
  打开模态框
</button> -->
 
<!-- 模态框 -->
<div class="modal fade" id="commentModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title" id="commentTitle">对 <span id="commentCname">教 练</span> 进 行 评 价</h4>
        <button type="button" class="close" data-dismiss="modal" id="closeComment">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
       	<%@ include file="star.jsp" %>
       	<hr>
       	<div>
       		<!-- 文本域start-->
		    <textarea name="tablemsg" cols="64" rows="10" id="textarea" placeholder="说说您的感想...最少输入10个字符"
		              onKeyUp="Huitextarealength(this)"></textarea>
		    <p class="textarea-numberbar"><em class="textarea-length">0</em>&nbsp;/
		        <am>200</am>
		    </p>
		    <!-- 文本域end-->
		    <!-- 隐藏域，存放当前订单的相关信息 -->
		    <input type="hidden" id="commentOid">
		    <input type="hidden" id="commentSid">
		    <input type="hidden" id="commentCid">
       	</div>
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
      	<button type="button" class="btn btn-secondary" id="submitComment">提交</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancleComment">取消</button>
      </div>
 
    </div>
  </div>
</div>
<script type="text/javascript">

//文本域字数限制提示(函数)
var Huitextarealength = function (obj){
    var html = $(obj).parent();
    var tatal = html.find('am').html();
    var sets = $(obj).val().length;
 
    if(sets*1>tatal*1){
        var str = '<div style="width: auto;position: absolute; right: 4%;color: red;">内容超出限制</div>';
        $(obj).after(str);
        html.find('em').css({color:'red'});
    }else {
        $(obj).parent().find('div').remove();
        html.find('em').css({color:'black'});
    }
    //设置已输入数量
    html.find('em').html(sets);
}

//点击取消按钮，清空文本域，星星初始化
$("#cancleComment").click(function(){
	/* $("#textarea").val(""); */
	$("#test").html(commentStar(0));
});

//点击关闭按钮，清空文本域，星星初始化
$("#closeComment").click(function(){
	/* $("#textarea").val(""); */
	$("#test").html(commentStar(0));
});

//点击提交按钮，将评价内容提交
$("#submitComment").click(function(){
	var commentRank = commentRanks();
	//获取文本域内容
	var textareaContent = $("#textarea").val();
	if(textareaContent.length < 10){
		alert("评论字数不能少于10");
		return;
	}else if(textareaContent.length > 200){
		alert("评论字数不能超过200");
		return;
	}
	$.ajax({
		url:"comment/insertComment",
		type:"post",
		data:{
			cid:$("#commentCid").val(),
			sid:$("#commentSid").val(),
			oid:$("#commentOid").val(),
			commentContent:$("#textarea").val(),
			commentRank:commentRank
		},
		success:function(result){
			alert(result);
			if(result.indexOf('成功') != -1){
				$("#commentModal").modal('hide');
				$("#textarea").val("");
			}
		}
	});
});

//星星对应数据库的commentRank
function commentRanks(){
	//获取评价
	var commentValue = $("#test").text();
	if(commentValue == '差'){
		var commentRank = 1;
	}else if(commentValue == '一般'){
		var commentRank = 2;
	}else if(commentValue == '中等'){
		var commentRank = 3;
	}else if(commentValue == '好'){
		var commentRank = 4;
	}else if(commentValue == '极好'){
		var commentRank = 5;
	}else{
		var commentRank = 0;
	}
	return commentRank;
}

</script>

